<template>
  <div class="pa">
    <el-card shadow="never" class="aui-card--fill">
      <div class="crud__menu">
        <el-col :span="12">
          <el-form ref="form1" :inline="true">
            <el-form-item>
              <el-radio-group v-model="show">
                <el-radio-button label="1">{{ this.$t('privilege.query1') }}</el-radio-button>
                <el-radio-button label="2">{{ this.$t('privilege.query2') }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button v-if="$hasPermission('sys:menu:isImportant')" type="warning" @click="getIdListByIsImportant()"
                v-popover:popover>{{ $t('privilege.setIsImportant') }}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" class="crud__right">
          <vxe-toolbar>
            <template v-slot:tools>
              <userDialogCondition ref="filter" :backFun="backFun"></userDialogCondition>
              <!-- <el-button icon="el-icon-refresh" @click="init()" circle></el-button> -->
            </template>
          </vxe-toolbar>
        </el-col>
      </div>
      <div>
        <privilegeAudit1 ref='privilegeAudit1' v-if="show === '1'" @showPrivilegeAudit="showPrivilegeAudit"
          v-bind:menuList="menuList" v-bind:deptList="deptList">
        </privilegeAudit1>
        <privilegeAudit2 ref='privilegeAudit2' v-if="show === '2'" @showPrivilegeAudit="showPrivilegeAudit"
          v-bind:deptList="deptList">
        </privilegeAudit2>
      </div>
      <div>
        <el-popover ref="popover" placement="bottom" width="200" trigger="click" v-model="popoverVisable">
          <el-tree :data="menuList" :props="defaultTreeProps" :default-checked-keys="IdListByIsImportant" node-key="id"
            ref="isImportantTree" accordion :show-checkbox="true">
          </el-tree>
          <el-row>
            <el-col :span="6">
              &nbsp;
            </el-col>
            <el-col :span="18">
              <el-button @click="updateIsImportant" size="mini" type="primary">{{ $t('confirm') }}</el-button>
              <el-button @click="() => { this.popoverVisable=false } " size="mini" type="info">{{ $t('cancel') }}
              </el-button>
            </el-col>
          </el-row>
        </el-popover>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss">
.pa .crud__menu {
  margin-bottom: 0px;
}
</style>

<script>
import privilegeAudit1 from './privilegeAudit1'
import privilegeAudit2 from './privilegeAudit2'
import userDialogCondition from './dataScope-user-condition'

export default {
  data () {
    return {
      filterVisible: false,
      popoverVisable: false,
      defaultTreeProps: {
        label: 'name',
        children: 'children'
      },
      show: '1',
      menuList: [],
      deptList: [],
      IdListByIsImportant: [],
      dataForm: {}
    }
  },
  watch: {
    show: function (newVal) {
      this.$refs.filter.clean()
    }
  },
  activated () {
    this.init()
  },
  methods: {
    backFun (data) {
      let ref = this.getRef()
      ref.dataForm = {
        ...ref.dataForm,
        ...data
      }
      ref.getDataList()
    },
    // 获取当前加载的组件
    getRef () {
      if (this.show === '1') {
        return this.$refs.privilegeAudit1
      }
      if (this.show === '2') {
        return this.$refs.privilegeAudit2
      }
      return null
    },
    init () {
      this.$nextTick(() => {
        Promise.all([
          this.getDeptList(),
          this.getMenuList()
        ]).then(() => {
        })
      })
    },
    // 切换组件
    showPrivilegeAudit (who) {
      this.show = who
    },
    // 设置敏感菜单
    updateIsImportant () {
      // 不要半选
      let ids = [
        ...this.$refs.isImportantTree.getCheckedKeys()
      ]
      this.$http.post('/sys/menu/isImportant', { value: ids }).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.getMenuList()
            this.getIdListByIsImportant()
          }
        })
      }).catch(() => { })
      this.popoverVisable = false
    },
    // 获取菜单列表
    getMenuList () {
      return this.$http.get('/sys/menu/select').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.menuList = res.data
      }).catch(() => { })
    },
    // 获取部门列表
    getDeptList () {
      return this.$http.get('/sys/dept/list').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.deptList = this.$utils.treeDataTranslate(res.data)
      }).catch(() => { })
    },
    // 获取敏感菜单ID List
    getIdListByIsImportant () {
      return this.$http.get('/sys/menu/getIdListByIsImportant').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.IdListByIsImportant = res.data
      }).catch(() => { })
    },
    // 导出
    exportHandle () {
      this.getRef().exportHandle()
    }
  },
  components: {
    privilegeAudit1,
    privilegeAudit2,
    userDialogCondition
  }
}
</script>
